<template>
  <div class="content q-pa-sm">
    <table-basic :title="'省市区管理'" :columns="columns" :tableData="tableData" :searchName="'名称'" @searchHandler="searchHandler" @Refresh="Refresh" >
      <template v-slot:toolbar>
        <div class="row q-gutter-sm">
          <q-btn color="secondary" label="添加记录" @click="alert=true"  />
          <q-btn color="negative" :disable="deleteDisable" label="批量删除" @click="deleteHandler"  />
        </div>
      </template>
    </table-basic>

    <form-basic :alert="alert" @close="alert = false" :from="from" :title="'省市区管理-添加'" @submit="submit"></form-basic>
  </div>
</template>

<script>
  import { getProvince, addProvince } from 'src/api/province'
  export default {
    name: "province",
    data () {
      return {
        alert: false,
        options: [],
        from:[
          {
            type: 'string', title: '首字母大写', class: '', required: true, style: 'width: 200px', field: 'firstLetter',
            rule: [ val=> String(val).length === 1 || '首字母只允许输入一位', val=> /[A-Z]/.test(val) || '首字母请输入大写']
          },
          {
            type: 'number', title: '中心点经度', class: 'lat', required: true, style: 'width: 200px',field: 'lat',
            rule: [ val=> !!val || '请输入中心点经度']
          },
          {
            type: 'number', title: '中心点纬度', class: 'lng', required: true, style: 'width: 200px',field: 'lng',
            rule: [ val=> !!val || '请输入中心点纬度']
          },
          {
            type: 'select', title: '层级', class:'', style: '',options:[{value: 1, label: 1},{value: 2, label: 2},{value: 3, label: 3}], style: 'width: 200px',field: 'level'
          },
          {
            type: 'select', title: '是否热门', class:'', style: '',options:[{value: 1, label: '是'},{value: 2, label: '否'}], style: 'width: 200px',field: 'isHot'
          },
          {
            type: 'string', title: '名称', class:'', style: '',required: true,  style: 'width: 200px',field: 'name',
            rule: [ val=> !!val || '请输入名称']
          },
          {
            type: 'string', title: '节点描述', class:'col', style: '',required: true,  style: '',field: 'namePath',
            rule: [ val=> !!val || '请输入节点描述']
          },
          {
            type: 'select', title: '层级', class:'', style: 'width: 200px',options: this.options || [], style: 'width: 200px',field: 'parentId,parentName'
          }
        ],
        tableData:[],
        deleteDisable:true,
        columns: [
          {name:'select', field: 'select'},
          {
            name: 'avatar',
            label: '头像',
            align: 'left',
            field: 'avatar',
            sortable: false
          },
          {name: 'firstLetter', align: 'center', label: '首字母大写', field: 'firstLetter', sortable: true},
          {name: 'level',align: 'center', label: '层级', field: 'level', sortable: true},
          {name: 'name', align: 'center',label: '名称', field: 'name', sortable: true},
          {name: 'namePath',align: 'center', label: '节点描述', field: 'namePath', sortable: true},
          {name: 'parentName',align: 'center', label: '\t上级名称', field: 'parentName', sortable: true},
          {name: 'isHot',align: 'center', label: '是否热门', field: 'isHot', format: (val, row) => `${val!==0?'是':'否'}`, sortable: true},
          {name: 'updateTime',align: 'center', label: '是否注册环信', field: 'updateTime',  sortable: true},
        ]
      }
    },
    mounted() {
      this.initialize()
    },
    components: {
      TableBasic: () => import('components/tables/TableBasic'),
      FormBasic: () => import('components/dialog/formBasic')
    },
    methods:{
      initialize(){
        let params = {
          limit: 10,
          page: 1
        }
        getProvince(params).then(
          success=>{
            this.tableData = success.records.map(item=>{
              item.select = false
              return item
            })
            this.getAddressOptions()
          }
        )
      },
      submit(data){
        let params = Object.assign(data,{

        })
        addProvince(params).then(
          success=>{
            console.log(success)
          }
        )
      },
      getAddressOptions(){
        this.options = []
        this.tableData.map(r=>{
          this.options.push({value: r.id, label: r.name})
        })
      },
      deleteHandler(){
        let deleteids = ''
      },
      searchHandler(filter){

      },
      Refresh(){
        this.initialize();
      }
    }
  }
</script>

<style scoped>

</style>
